<template>
  <div>
    <h3 style="text-align: center">用户流量概述</h3>
    <div id="myChart" style="width:100%;height:300px;"></div>
  </div>
</template>

<script>
// import userData from '../../../userData'
import FlowChartDataHandle from '../../DataHandle/FlowChartDataHandle.js'
export default {
  name: 'FlowChart',
  data() {
    return {
      msg: 'Welcome to FlowChart',
      myChart: null,
      flowChartData: [],
      flowChartTypeName:[]
    }
  },
  props: {
    datelist: Array
  },
  created() {
    this.$Pubsub.subscribe("flowChartData",(msgName,msg)=>{
      this.flowChartData = msg
    })
  },
  watch: {
    // datelist() {
    //   this.myChart.dispose()
    //   console.log('date发生更新')
    //   this.getSpecifiedDateData()
    //   console.log("日期发生更新了，重新渲染")
    //   this.chartInit()
    // },
    flowChartData (){
      this.chartInit()
    }
  },
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      // console.log(this.userDT)
      // if (this.myChart !== null) {
      //   this.myChart.dispose()
      // }
      this.myChart = this.$echarts.init(document.getElementById('myChart'))
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.flowChartData[1]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.datelist
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.flowChartData[0]
      })
    }
  }
}
</script>

<style scoped>
</style>
